<template>
  <view class="container">
    <view class="circle">
      <view class="circle1">
        <van-circle :value="percentSteps" :text="healthData.steps + '步'" stroke-width="8" />
        <text>今日步数</text>
      </view>
      <view class="circle2">
        <van-circle :value="percentSleep" :text="convertMinutesToHours(healthData.sleepDuration) + '小时'" stroke-width="8" />
        <text>睡眠时长</text>
      </view>
    </view>
    
    <view class="info">
      <view class="affairs">
        <text>待办事项</text>
        <text>{{statusZeroCount}}/{{eventsCount}}</text>
      </view>
    </view>
    
    <view class="health-status">
        <!-- 血压状态栏 -->
        <view class="status-bar">
          <text class="status-title">血压</text>
          <text class="status-value">{{ healthData.bloodPressure }}&nbsp;mmHg</text>
        </view>
  
        <!-- 血糖状态栏 -->
        <view class="status-bar">
          <text class="status-title">血糖</text>
          <text class="status-value">{{ healthData.bloodSugar }}&nbsp;mmol/L</text>
        </view>
      </view>
    
    <view class="info1">
      <van-cell-group inset>
        <van-cell title="体重" :value="healthData.weight + ' kg'" />
        <van-cell title="饮水" :value="healthData.waterIntake + '/1600 ml'" :label="healthData.waterIntake > 1600 ? '饮水也需适量' : ''" />
        <van-cell title="卡路里" :value="healthData.calorie + '/2200'" :label="healthData.calorie > 2200 ? '已经超出标准线' : ''" border="false" />
      </van-cell-group>
    </view>
    
    <uni-fab ref="fab" horizontal="right" vertical="bottom" direction="vertical" :popMenu="false" @fabClick="fabClick" :pattern="pattern" />
  </view>
</template>

<script>
  import iCircle from '@/components/xiaoran-circle/xiaoran-circle.vue';
  import {
    getEventList
  } from '@/api/event.js'
  import {
    getTodayHealthData
  } from '@/api/healthData.js'
  export default {
    components: {
      iCircle
    },
    computed: {
        
      },
    onShow() {
      console.log('刷新健康数据')
      this.refreshHealthData()
      this.refreshEvents()
    },
    data() {
      return {
        pattern: {
          icon: 'refreshempty'
        },
        userId: 0,
        healthData: {},
        bloodPressure: '120/80 mmHg',  // 默认血压值
        bloodSugar: '5.2 mmol/L',      // 默认血糖值
        percent: 80,
        sleepHours: "7.26小时",
        stepNumber: "3456步",
        maxSteps: 8000, 
        maxSleepDuration: 480, 
        calorie: 0,
        foodRecords: [],
        eventsCount: 0,
        statusZeroCount: 0
      }
    },
    computed: {
      color() {
        let color = '#2db7f5';
        if (this.percent == 100) {
          color = '#5cb85c';
        }
        return color;
      },
      percentSteps() {
        let percent = (this.healthData.steps / this.maxSteps) * 100;
        return Math.round(percent)
      },
      percentSleep() {
        let percent = (this.healthData.sleepDuration / this.maxSleepDuration) * 100;
        return Math.round(percent)
      },
    },
    created() {
      this.userId = uni.getStorageSync('userId');
      this.refreshHealthData()
    },
    methods: {
      refreshEvents() {
        this.userId = uni.getStorageSync('userId');
        getEventList(this.userId).then((res)=>{
          const events = res.data
          this.eventsCount = events.length;
          this.statusZeroCount = events.filter(item => item.status === 1).length;
        })
        
        
      },
      refreshHealthData(){
        this.userId = uni.getStorageSync('userId');
        getTodayHealthData(this.userId).then((res) => {
          this.healthData = res.data
        })
      },
      fabClick() {
        uni.navigateTo({
          url: '/pages/update/update'
        })
      },
      add() {
        if (this.percent >= 100) {
          return false;
        }
        this.percent += 10;
      },
      minus() {
        if (this.percent <= 0) {
          return false;
        }
        this.percent -= 10;
      },
      timestampFormat(timestamp) {
        const date = new Date(timestamp * 1000);
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${hours}:${minutes}`;
      },
       convertMinutesToHours(minutes) {
          if (typeof minutes !== 'number' || isNaN(minutes)) {
            return '无效输入';
          }
          return (minutes / 60).toFixed(2);
        }
    }
  }
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
  }

  .circle {
    margin-top: 20px;
    display: flex;
    width: 300px;

  }

  .circle1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .circle2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .health-status {
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  
  .status-bar {
    display: flex;
    flex-direction: column;
    width: 150px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f4f4f4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .status-title {
    font-size: 16px;
    color: #333;
  }
  
  .status-value {
    font-size: 18px;
    font-weight: bold;
    color: #007AFF;
  }

  .info {
    background-color: #E7E8ED;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    font-family: 'Helvetica', sans-serif;
    display: flex;
    flex-direction: column;
    box-shadow:
      -4px -4px 10px rgba(255, 255, 255, 0.8),
      /* 左边和上边白色阴影 */
      4px 4px 10px rgba(0, 0, 0, 0.3);
    /* 右边和下边黑色阴影 */
  }

  .affairs {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
  }

  .info1 {
    width: 380px;
  }

  .upload {
    width: 380px;
  }
</style>